<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .title{color:red}
    </style>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>


    <!-- 引入react核心库 -->
    <script src="../js/16/react.development.js" ></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script src="../js/16/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script src="../js/babel.js" ></script>
    <script type="text/babel"> /*此处一定要写babel，否则无法识别jsx语法*/
       // 创建类式组件
        class MyComponent extends React.Component{
            render(){
                // render是放在哪里的？-MyComponent的原型对象上，供实例使用
                // render中的this是谁？-MyComponent的实例对象
                console.log('this:',this)
                return <h1>Hello,React</h1>
           }
        }
       // 渲染组件到页面
       ReactDOM.render(<MyComponent/>, document.getElementById('test'))
       /**
        * 执行了ReactDOM.render(<MyComponent/>,....)方法后，发生了什么？
        * （1）React解析组件标签，找到了MyComponent组件
        * （2）发现组件使用类定义的，随后new出该类的实例，并通过实例调用到原型上的render方法
        * （3）将render返回的虚拟DOM转为真实DOM，并挂载到容器中
        * 1.创建了MyComponent的实例对象，并执行了render方法
        * 2.将render方法中的JSX表达式转为React元素
        * 3.将React元素渲染到页面上
        * 4.将React元素和React元素中的JSX表达式进行比较，如果发生变化，则更新页面
        * 5.将React元素中的JSX表达式转为React元素
        * 6.将React元素中的JSX表达式转为React
        */
    </script>
</body>
</html>